import bmw from '@/assets/layout/bmw.jpg';
import ImgScreenView from '@/components/ImgScreenView';
import { useTeplateModal } from '@/components/TemplateModal';
import { ContentCard } from '@/page-components';
import { Button } from 'antd';
import { useRef } from 'react';
const Index = () => {
  const { showModal, hideModal, TemplateModal } = useTeplateModal();
  const imgViewRef = useRef<any>();
  return (
    <>
      <div>权限演示的详情页</div>
      <Button
        onClick={() =>
          showModal(() => {
            setTimeout(() => {
              return new Promise((resolve, reject) => {
                console.log('模态框打开');

                resolve('123');
              });
            }, 1000);
          })
        }
      >
        打开
      </Button>
      <ContentCard title="权限测试页面" loading={false}>
        <div>这是一个权限测试页面</div>
        <div>这是一个权限测试页面</div>
        <div>这是一个权限测试页面</div>
        <div>这是一个权限测试页面</div>
        <div>这是一个权限测试页面</div>
        <div>这是一个权限测试页面</div>
        <div>这是一个权限测试页面</div>
      </ContentCard>
      <ContentCard title="权限测试页面">
        <img src={bmw} />
        <Button
          onClick={() => {
            showModal();
          }}
        >
          点击预览大图
        </Button>
      </ContentCard>
      <ImgScreenView ref={imgViewRef} />
      <Button
        onClick={() => {
          imgViewRef.current.show(bmw);
        }}
      >
        点击预览大图
      </Button>
      {TemplateModal({
        title: <div></div>,
        width: '700px',
        footer: false,
        children: (
          <>
            <img src={bmw} className="mt-[20px] " />
          </>
        ),
      })}
    </>
  );
};
export default Index;
